<template>
    <!-- <div style="display: flex; flex-wrap: wrap; gap: 20px">
        <div ref="chartCelllineRef" style="flex: 1; min-width: 500px; height: 500px"></div>
        <div ref="chartLineageRef" style="flex: 1; min-width: 500px; height: 500px"></div>
    </div> -->
    <div class="stats-chart">
        <div class="chart-wrapper">
            <div class="chart-box" ref="chartCelllineRef"></div>
        </div>
        <div class="chart-wrapper">
            <div class="chart-box" ref="chartLineageRef"></div>
        </div>
    </div>
</template>

<script setup lang="ts" name="GeneStats">
    import { ref, onMounted } from 'vue';
    import { post } from '@/axios/api';
    import * as echarts from 'echarts';
    import { colorList } from '@/common/util';

    const chartCelllineRef = ref(null);
    const chartLineageRef = ref(null);

    let chartCellline = null;
    let chartLineage = null;

    const fetchAndRender = async () => {
        try {
            const res:any = await post('/gene_stats/');
            const celllineData = res.cellline_data || [];
            const lineageData = res.lineage_data || [];

            // 取前10
            const topCellline = celllineData;
            const topLineage = lineageData;

            // x轴 & y轴数据
            const genesCellline = topCellline.map((item:any) => item.gene);
            const countsCellline = topCellline.map((item:any) => item.count);

            const genesLineage = topLineage.map((item:any) => item.gene);
            const countsLineage = topLineage.map((item:any) => item.count);

            // 初始化 ECharts
            chartCellline = echarts.init(chartCelllineRef.value);
            chartLineage = echarts.init(chartLineageRef.value);

            const optionCellline = {
                title: { text: 'Top Genes by Cell Line Occurrence' },
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                xAxis: {
                    type: 'value',
                    name: 'Number of Cell Lines',
                    nameLocation: 'middle',
                    nameGap: 30,
                    axisLine: { show: true, lineStyle: { color: '#000' } },
                    axisLabel: {
                        color: '#000',
                        interval: 0,
                        align: 'right'
                    }
                },
                yAxis: {
                    type: 'category',
                    data: genesCellline,
                    inverse: true,  // 反转排序
                    name: 'Gene',
                    nameGap: 60,
                    nameLocation: 'middle',
                    axisLine: { lineStyle: { color: '#000' } },
                    axisLabel: {
                        color: '#000',
                        interval: 0,
                        align: 'right'
                    }
                },
                series: [
                    {
                        name: 'Occurrences',
                        type: 'bar',
                        data: countsCellline,
                        barMaxWidth: 12,
                        barMinHeight: 4,
                        itemStyle: {
                            color: (params:any) => colorList[params.dataIndex % colorList.length]
                        }
                    }
                ],
                grid: {
                    left: '5%', // 给 y 轴名称留空间
                    right: '5%',
                    top: 50,
                    bottom: 30,
                    containLabel: true
                }
            };

            // 水平条形图配置：lineage
            const optionLineage = {
                title: { text: 'Top Genes by Oncotree Lineage Occurrence' },
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                xAxis: {
                    type: 'value',
                    name: 'Number of OncotreeLineages',
                    nameLocation: 'middle',
                    nameGap: 30,
                    axisLine: { show: true, lineStyle: { color: '#000' } },           // 黑色坐标轴线
                    axisLabel: { color: '#000' }                          // 黑色坐标轴标签
                },
                yAxis: {
                    type: 'category',
                    data: genesLineage,
                    inverse: true,  // 反转排序
                    name: 'Gene',
                    nameGap: 60,
                    nameLocation: 'middle',
                    axisLine: { lineStyle: { color: '#000' } },
                    axisLabel: {
                        color: '#000',
                        interval: 0,
                        align: 'right'
                    }
                },
                series: [
                    {
                        name: 'Occurrences',
                        type: 'bar',
                        data: countsLineage,
                        barMaxWidth: 12,
                        barMinHeight: 4,
                        itemStyle: {
                            color: (params:any) => colorList[params.dataIndex % colorList.length]
                        }
                    }
                ],
                grid: {
                    left: '5%',
                    right: '5%',
                    top: 50,
                    bottom: 30,
                    containLabel: true
                }
            };

            chartCellline.setOption(optionCellline);
            chartLineage.setOption(optionLineage);
        } catch (err) {
            console.error('An Error occured', err);
        }
    };

    onMounted(() => {
        fetchAndRender();
    });
</script>

<style scoped lang="scss">
    .stats-chart {
        display: flex;
        gap: 16px;
        padding: 16px;
        background: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .chart-wrapper {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .chart-box {
        width: 100%;
        height: 600px;
        background: #fff;
        border-radius: 6px;
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
        padding: 8px;
    }
</style>
